  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <body style="padding:10px;">
  <div class="panel panel-primary">
  <div class="panel-heading"><h1>Disk Scheduling</h1></div>
  <div class="panel-body">
  <div style="height:60px;">
  <div style="width:200px;float:left;margin-right:10px;">
  <label for="cur">Current position:</label>
  <input type="text" class="form-control" id="cur">
  </div>

  <div style="width:200px;float:left;margin-right:10px;">
  <label for="prev">Previous request:</label>
  <input type="text" class="form-control" id="prev">
  </div>

  <div style="width:600px ;float:left;margin-right:10px;">
  <label for="req">Requests (space seperated):</label>
  <input type="text" class="form-control" id="req">
  </div>
</div>
  <div style="height:100px;">
  <div style="width:200px;float:left;">
  <label for="cyl">Number of Cylinders:</label>
  <input style="width:200px;" type="text" class="form-control" id="cyl">
  </div>

  <div style="width:200px;float:left;margin-left:10px;">
    <label for="sel1">Select Algorithm:</label>
    <select class="form-control" id="sel1" style="width:200px;">
      <option>FCFS</option>
      <option>SSTF</option>
      <option>CSCAN</option>
      <option>SCAN</option>
      <option>CLOOK</option>
      <option>LOOK</option>
    </select>
  </div>
  <button id="sender" class="btn btn-success" style="float:left;margin-top:25px;margin-left:10px;">Send</button>
</div>

  <div id="chart_div" style="margin-top:30px;"></div>
</div>
  <div class="panel-footer">
  <h3 id="result"></h3>
  </div>
</div>
  </body>
  <script>

var a;
var seek;
// 	var a = [
// [20,-0],[50,-1],[100,-2],[10,-3],[5,-4]
//   ];//Array of Array format : [order of access,Cylinder number]


  	function drawBackgroundColor() {
  	      var data = new google.visualization.DataTable();
  	      data.addColumn('number', 'Cylinder');
  	      data.addColumn('number', 'order');

  	      data.addRows(a);

  	      var options = {
  		hAxis: {
  		  title: 'Cylinder Number'
  		},
      pointSize: 10,
      animation:{
          duration: 1000,
          easing: 'in',
        },
  		vAxis: {
  		  title: '',
        baselineColor: 'none',
        ticks: []
  		},
  		backgroundColor: '#f1f8e9',
  		legend: {position: 'none'}
  	      };

  	      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  	      chart.draw(data, options);
          document.getElementById("result").innerHTML = "Seek-Time : " + seek;
  	    }
  $('#sender').click(function(){
  var irequests = $("#req").val().trim().split(" ");
  var i;
  console.log(irequests);
  var icyl = $("#cyl").val();
  icyl = parseInt(icyl);
  console.log(icyl);

  var icur = $("#cur").val();
  icur = parseInt(icur);
  console.log(icur);
  var iprev = $("#prev").val();
  iprev = parseInt(iprev);
  console.log(iprev);

  var data = {'cyl':icyl, 'current':icur, 'prev':iprev, 'requests':irequests.map(Number), 'n':irequests.length};
  console.log(data);

  var text = JSON.stringify(data);
  var ialg = JSON.stringify($("#sel1").val());
  //console.log(text);
  $.post('/disk/gateway/',{value:text,algo:ialg}, function(result){
    a=result['output']['sequence'];
    seek = result['output']["displacement"];
    google.charts.load('current', {packages: ['corechart', 'line']});
  	google.charts.setOnLoadCallback(drawBackgroundColor);

  });

});


  </script>
